<template>
	<div class="order-list-container">
		<el-card class="breadcrumb-card" ref="condition">
			<!-- 路径导航 -->
			<div slot="header" class="breadcrumb-header">
				<div class="table-header"><i class="el-icon-location-information"/>订单管理</div>
			</div>
			<!-- 筛选条件 --> 
			<el-form class="form" :inline="true">
				<el-form-item label="订单编号">
					<el-input size="small" placeholder="订单编号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="default">查询</el-button>
				</el-form-item>
			</el-form>	
		</el-card>
		<!-- 数据列表 -->
		<el-card class="table-card">
			<el-table :height="tableHeight" size="small" style="width: 100%" :data="tableData.list">
				<el-table-column prop="orderSn" :show-overflow-tooltip="true" label="编号"/>
				<el-table-column prop="pic" align="center" label="图片" width="80">
					<template slot-scope="scope">
						<el-avatar shape="square" :size="40" :src="scope.row.orderItemList[0].goodsPic"/>
					</template>
				</el-table-column>
				<el-table-column prop="cartTotalMoney" align="center" label="购物车" width="80">
					<template slot-scope="scope">
						<span class="money">{{scope.row.cartTotalMoney | fentoyuan}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="orderDiscountMoney" align="center" label="订单优惠" width="80">
					<template slot-scope="scope">
						<span class="money">{{scope.row.orderDiscountMoney | fentoyuan}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="orderFreightMoney" align="center" label="订单运费" width="80">
					<template slot-scope="scope">
						<span class="money">{{scope.row.orderFreightMoney | fentoyuan}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="orderPayMoney" align="center" label="支付金额" width="80">
					<template slot-scope="scope">
						<span class="money">{{scope.row.orderPayMoney | fentoyuan}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="showStatus" align="center" label="订单状态" width="120"/>
				<el-table-column prop="createTime" align="center" label="下单时间" width="180"/>
				<el-table-column prop="payTime" align="center" label="支付时间" width="180"/>
				<el-table-column align="right" width="160" label="操作" fixed="right">
					<template slot-scope="scope">
						<el-button size="small" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
						<el-button v-if="scope.row.status == '1'" size="small" @click="handleDelivery(scope.$index, scope.row)">发货</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>	
		<div class="pagination">
			<el-pagination @current-change="currentChange" background :page-size="tableData.params.pageSize" :page-count="tableData.totalPage" :total="tableData.totalCount" layout="total, prev, pager, next, jumper"/>
		</div>
	</div>
</template> 

<script>
import mallOrderApi from '@/api/mallOrderApi'	
	
export default {
	name: 'orderList',
	data () {
		return {
			tableHeight: 0,
			tableData: {
				params: {	
					pageNo: 1,
					pageSize: 10,
				},
				totalCount: 0,
				totalPage: 0,
				list: []
			}
		}
	},
	mounted () {
		this.$nextTick(() => { 
			let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			this.tableHeight = h - this.$refs.condition.$el.offsetHeight - 160;
		});
	},
	created () {
		this.getDataList();
	},
	methods: {
		/* 获取列表数据 */
		getDataList () {
			mallOrderApi.orderList(this.tableData.params).then(result => {
				this.tableData.totalPage = result.data.totalPage;
				this.tableData.totalCount = result.data.totalCount;
				this.tableData.list = result.data.list;
			})
		},
		/* 页面变化 */
		currentChange (pageNo){
			this.tableData.params.pageNo = pageNo;
			this.getDataList();
		},
		/* 详情 */
		handleDetail (index, row){
			this.$router.push({path: '/mall/order/detail', query:{id:row.id}});
		},
		/* 发货 */
		handleDelivery (index, row){
			this.$router.push({path: '/mall/order/delivery', query:{id:row.id}});
		}
	}
}	
</script>

<style lang="scss">
.order-list-container{
	
}	
</style>
